<%--
  Created by IntelliJ IDEA.
  Author: Deng PengFei
  Date: 2021/8/14
  Time: 10:45
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <%--引入LayUI--%>
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery-3.1.0.js"></script>
    <style>
        body {
            background-color: #eeeeee;
        }

        .layui-row {
            padding: 10px;
            margin: 10px;
            background-color: white;
            border-radius: 5px;
        }

        .layui-col-lg4 {
            padding: 10px;
        }


        .layui-card {
            border: solid #e2e2e2 1px;
        }

    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">


    <%--面包屑导航--%>
    <div class="layui-row">
            <span class="layui-breadcrumb">
             <a href="studentInfo.jsp">首页</a><a><cite>学生进度情况</cite></a>
            </span>
    </div>


    <%--左边--%>
    <div class="layui-col-lg10">
        <%--学生选题信息情况--%>
        <div class="layui-row">
            <div class="layui-col-lg4 layui-bg-red ">
                <div class="layui-col-lg3" style="text-align: center">
                    <i class="layui-icon layui-icon-group" style="font-size: 80px"></i>
                </div>

                <%--选题人数统计--%>
                <div class="layui-col-lg8" style="font-size: 18px;line-height: 50px;text-align: center;">
                    <div class="layui-col-lg12">
                        学生总数 <span id="stuSum">- -</span> 人
                    </div>
                    <div class="layui-col-lg12">
                        <div class="layui-col-lg6">
                            已选题人数 <span id="finishStu">- -</span> 人
                        </div>
                        <div class="layui-col-lg6">
                            未选题人数 <span id="unFinishStu">- -</span> 人
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <%--每个进度信息盒子--%>
        <div class="layui-row">

            <%--每个阶段详情--%>
            <div class="layui-col-lg12" style="text-align: center">

                <div class="layui-card" style="margin-top: 0;">
                    <div class="layui-card-header">
                        <div class="layui-col-lg12">
                            <h2 style="text-align: left;padding-left: 20px">
                                <i class="layui-icon layui-icon-app"></i>
                                各阶段的完成人数详情
                            </h2>
                            <%--筛选查询栏--%>
                            <%--完成标志--%>
                            <div class="layui-col-lg2 layui-col-lg-offset10">
                                <span class="layui-badge layui-bg-green">已结束</span>
                                <span class="layui-badge">进行中</span>
                                <span class="layui-badge" style="background-color: gray">未开始</span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body layui-clear">
                        <%--任务书--%>
                        <div class="layui-col-lg4 ">
                            <div class="layui-card">
                                <div class="layui-card-header" id="assignment" style="background-color: gray">
                                    <h3><i class="layui-icon layui-icon-template-1"></i> 任务书</h3>
                                </div>
                                <div class="layui-card-body">
                                    时 间：<span id="time1"></span><br>
                                    未开始 ： <span id="assignmentNotStart"></span> 人<br>
                                    进行中 ： <span id="assignmentStart"></span> 人<br>
                                    已完成 ： <span id="assignmentFinish"></span> 人<br>
                                    完成率 : <span id="assignmentRate"></span> %<br>
                                    倒计时：<span id="time-ret1"></span>
                                </div>
                            </div>
                        </div>

                        <%--开题报告--%>
                        <div class="layui-col-lg4">
                            <div class="layui-card">
                                <div class="layui-card-header" id="report" style="background-color: gray">
                                    <h3><i class="layui-icon layui-icon-template-1"></i> 开题报告</h3>
                                </div>
                                <div class="layui-card-body">
                                    时 间：<span id="time2"></span><br>
                                    未开始 ： <span id="reportNotStart"></span> 人<br>
                                    进行中 ： <span id="reportStart"></span> 人<br>
                                    已完成 ： <span id="reportFinish"></span> 人<br>
                                    完成率 : <span id="reportRate"></span> %<br>
                                    倒计时：<span id="time-ret2"></span>
                                </div>
                            </div>
                        </div>

                        <%--中期检查--%>
                        <div class="layui-col-lg4">
                            <div class="layui-card">
                                <div class="layui-card-header" id="medium" style="background-color: gray">
                                    <h3><i class="layui-icon layui-icon-template-1"></i> 中期检查</h3>
                                </div>
                                <div class="layui-card-body">
                                    时 间：<span id="time3"></span><br>
                                    未开始 ： <span id="mediumNotStart"></span> 人<br>
                                    进行中 ： <span id="mediumStart"></span> 人<br>
                                    已完成 ： <span id="mediumFinish"></span> 人<br>
                                    完成率 : <span id="mediumRate"></span> %<br>
                                    倒计时：<span id="time-ret3"></span>
                                </div>
                            </div>
                        </div>


                        <%--初稿--%>
                        <div class="layui-col-lg4">
                            <div class="layui-card">
                                <div class="layui-card-header" id="firstDraft" style="background-color: gray">
                                    <h3><i class="layui-icon layui-icon-template-1"></i> 论文初稿</h3>
                                </div>
                                <div class="layui-card-body">
                                    时 间：<span id="time4"></span><br>
                                    未开始 ： <span id="firstDraftNotStart"></span> 人<br>
                                    进行中 ： <span id="firstDraftStart"></span> 人<br>
                                    已完成 ： <span id="firstDraftFinish"></span> 人<br>
                                    完成率 : <span id="firstDraftRate"></span> %<br>
                                    倒计时：<span id="time-ret4"></span>
                                </div>
                            </div>
                        </div>

                        <%--定稿--%>
                        <div class="layui-col-lg4">
                            <div class="layui-card">
                                <div class="layui-card-header" id="finalize" style="background-color: gray">
                                    <h3><i class="layui-icon layui-icon-template-1"></i> 论文定稿</h3>
                                </div>
                                <div class="layui-card-body">
                                    时 间：<span id="time5"></span><br>
                                    未开始 ： <span id="finalizeNotStart"></span> 人<br>
                                    进行中 ： <span id="finalizeStart"></span> 人<br>
                                    已完成 ： <span id="finalizeFinish"></span> 人<br>
                                    完成率 : <span id="finalizeRate"></span> %<br>
                                    倒计时：<span id="time-ret5"></span>
                                </div>
                            </div>
                        </div>

                        <%--终稿--%>
                        <div class="layui-col-lg4">
                            <div class="layui-card">
                                <div class="layui-card-header" id="finalVersion" style="background-color: gray">
                                    <h3><i class="layui-icon layui-icon-template-1"></i> 论文终稿</h3>
                                </div>
                                <div class="layui-card-body">
                                    时 间：<span id="time6"></span><br>
                                    未开始 ： <span id="finalVersionNotStart"></span> 人<br>
                                    进行中 ： <span id="finalVersionStart"></span> 人<br>
                                    已完成 ： <span id="finalVersionFinish"></span> 人<br>
                                    完成率 : <span id="finalVersionRate"></span> %<br>
                                    倒计时：<span id="time-ret6"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>


    <%--整个时间树--%>
    <div class="layui-col-lg2">
        <div class="layui-row">
            <div class="layui-card" style="margin-top: 0">
                <div class="layui-card-header"><h2>各阶段的时间安排</h2></div>
                <div class="layui-card-body">
                    <ul class="layui-timeline">
                        <li class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis" id="finalVersionTime">&#xe617;</i>
                            <div class="layui-timeline-content layui-text">
                                <h3 class="layui-timeline-title">终稿阶段</h3>
                                <p id="finalVersionTree">------</p>
                            </div>
                        </li>

                        <li class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis" id="finalizeTime">&#xe617;</i>
                            <div class="layui-timeline-content layui-text">
                                <h3 class="layui-timeline-title">定稿阶段</h3>
                                <p id="finalizeTree">------</p>
                            </div>
                        </li>

                        <li class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis" id="firstDraftTime">&#xe617;</i>
                            <div class="layui-timeline-content layui-text">
                                <h3 class="layui-timeline-title">初稿阶段</h3>
                                <p id="firstDraftTree">------</p>
                            </div>
                        </li>

                        <li class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis" id="mediumTime">&#xe617;</i>
                            <div class="layui-timeline-content layui-text">
                                <h3 class="layui-timeline-title">中期检查阶段</h3>
                                <p id="mediumTree">------</p>
                            </div>
                        </li>

                        <li class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis" id="reportTime">&#xe617;</i>
                            <div class="layui-timeline-content layui-text">
                                <h3 class="layui-timeline-title">开题报告阶段</h3>
                                <p id="reportTree">------</p>
                            </div>
                        </li>

                        <li class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis" id="assignmentTime">&#xe617;</i>
                            <div class="layui-timeline-content layui-text">
                                <h3 class="layui-timeline-title">任务书阶段</h3>
                                <p id="assignmentTree">------</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

<script>
    let USERNAME;
    $(function () {
        USERNAME = '${sessionScope.userName}';
    });
</script>
<script src="js/studentInfo.js"></script>
</html>
